const forceLandscape = (id = "#app") => {
  const handler = () => {
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    console.log("[ width ] >", width);
    console.log("[ height ] >", height);
    let targetDom = document.querySelector(id);
    if (!targetDom) return;

    // 如果宽度比高度大，则认为处于横屏状态
    // 也可以获取 window.orientation 方向来判断屏幕状态
    if (width > height) {
      targetDom.style.position = "fixed";
      targetDom.style.width = `${width}px`;

      targetDom.style.height = `${height}px`;
      targetDom.style.left = `${0}px`;
      targetDom.style.top = `${0}px`;
      targetDom.style.transform = "none";
      targetDom.style.transformOrigin = "50% 50%";

      $("#app-header").width(`${width}px`);
      $(".layout-panel-center").width(`${width}px`);
      $("#app-center").width(`${width}px`);
      $("#app-canvas").width(`${width}px`);
      $("#FirstPage").width(`${width}px`);
    } else {
      targetDom.style.position = "fixed";
      targetDom.style.width = `${height}px`;
      targetDom.style.height = `${width}px`;
      targetDom.style.left = `${0 - (height - width) / 2}px`;
      targetDom.style.top = `${(height - width) / 2}px`;
      targetDom.style.transform = "rotate(90deg)";
      targetDom.style.transformOrigin = "50% 50%";

      $("#app-header").width(`${height}px`);
      $(".layout-panel-center").width(`${height}px`);
      $("#app-center").width(`${height}px`);
      $("#app-canvas").width(`${height}px`);
      $("#FirstPage").width(`${height}px`);
    }
  };

  const handleResize = () => {
    setTimeout(() => {
      handler();
    }, 300);
  };

  window.addEventListener("resize", handleResize);

  handler();
};
